{% extends 'base.html' %}
{% load msnaktags %}

{% block title %}All Files{% endblock %}
{% block header-title %}All Files{% endblock %}

{% block extra-head %}
{% endblock %}

{% block css %}
<style type="text/css">
    {% ifequal view "list" %} {# List view #}
    div#content {
        /* this is kinda retarded */
        padding: 0 0 0 1px;
    }
    table.filelist {
        border-collapse: collapse;
        width: 100%;
        margin: 0;
    }
    /* Row Styles */
    tr.fileentry:nth-child(odd) {
        /* Odd rows only */
        background-color: #efe;
    }
    tr.fileentry:nth-child(even) {
        /* Even rows only */
        background-color: #fff;
    }
    thead.fileentry {
        /* First row of the table i.e. header row */
        display: table-header-group;
        background-color: #ced;
        font-size: 12pt;
    }
    /* Cell Styles */
    .fileentry td {
        /* All cells */
        padding: 0.2em 0.4em;
        text-align: center;
        font-size: 80%;
    }
    thead.fileentry td {
        /* Every cell in the header */
        border-bottom: solid thin #ccc;
        font-size: 100%;
    }
    .fileentry td:first-child {
        /* First cell of every row */
        padding-left: 10px !important;
    }
    /* Other Styles */
    tr.fileentry td form {
        /* Forms within table cells */
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    td.extended {
        /* Cells which could contain long text */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
    td.buttons {
        white-space: nowrap;
    }
    {% else %} {# Thumbnail view #}
    div#content {
        padding: 0 0 8px 0;
        font-size: 0;
    }
    div.imgbox {
        text-align: center;
        width: 200px;
        height: 150px;
        margin: 5px 0;
        line-height: 150px;
        border-bottom: solid thin #ccc;
    }
    img.thumbimg {
        max-width: 200px;
        max-height: 150px;
        vertical-align: baseline;
    }
    div.thumbitem {
        font-size: 10pt;
        text-align: left;
        display: inline-block;
        border: solid thin #ccc;
        margin: 8px 0 0 8px;
    }
    div.thumbitem form {
        display: inline-block;
        margin: 2px 5px;
    }
    div.thumbtitle {
        width: 190px;
        padding: 2px 5px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    {% endifequal %}
</style>
{% endblock %}

{% block sidebar %}
View as:<br>
<a href="?{% get_query "view" "list" %}">List</a><br>
<a href="?{% get_query "view" "thumb" %}">Thumbnails</a><br>
<hr>
Browse by Category:<br>
<a href="?{% get_query "type" "all" %}">All</a><br>
<a href="?{% get_query "type" "image" %}">Image</a><br>
<a href="?{% get_query "type" "video" %}">Video</a><br>
<a href="?{% get_query "type" "audio" %}">Audio</a><br>
<a href="?{% get_query "type" "other" %}">Other</a><br>
<hr>
Sort by:<br>
<a href="?{% get_query "sort" "title" %}">Title</a><br>
<a href="?{% get_query "sort" "filename" %}">File Name</a><br>
<a href="?{% get_query "sort" "upload_time" %}">Date Uploaded</a><br>
<a href="?{% get_query "sort" "view_count" %}">Download Count</a><br>
<a href="?{% get_query "sort" "category" %}">Category</a><br>
{% endblock %}

{# TODO: INTEGRATE NEW FILE-LIST TEMPLATE WITH THIS FILE #}
{% block content %}
{% ifequal view "list" %} {# List view #}
<table class="filelist">
    <thead class="fileentry">
        <td>
            Title
        </td>
        <td>
            Uploaded
        </td>
        <td>
            Views
        </td>
        <td>
            &nbsp;
        </td>
    </thead>
    <tbody>
        {% for f in file_list_entries %}
        <tr class="fileentry">
            <td class="extended" title="{{ f.filename }}">
                {% firstof f.file_title f.filename %}
            </td>
            <td>
                {{ f.upload_time }}
            </td>
            <td>
                {{ f.view_count }}
            </td>
            <td class="buttons">
                <form action="/file-details" method="GET">
                    <input type="submit" value="Details">
                    <input type="hidden" name="fileid" value="{{ f.file_id }}">
                </form>
                <form action="/download" method="GET">
                    <input type="submit" value="Download">
                    <input type="hidden" name="fileid" value="{{ f.file_id }}">
                </form>
            </td>
        </tr>
        {% empty %}
        <tr class="fileentry">
            <td colspan="4">
                There are no files to display.
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% else %} {# Thumbnails view #}

{% for f in file_list_entries %}
<div class="thumbitem">
    <div class="thumbtitle" title="{{ f.filename }}">{% firstof f.file_title f.filename %}</div>
    <div class="imgbox"><img class="thumbimg" src="{{ f.file_id|thumbnail_url }}" alt="{% firstof f.file_title f.filename %}" title="{{ f.filename }}"></div>
    <form action="/download" method="GET">
        <input type="submit" value="Download">
        <input type="hidden" name="fileid" value="{{ f.file_id }}">
    </form>
    <form action="/file-details" method="GET" style="float:right;">
        <input type="submit" value="Details">
        <input type="hidden" name="fileid" value="{{ f.file_id }}">
    </form>
</div>   
{% empty %}
There are no files to display.
{% endfor %}
{% endifequal %} {# End views if #}
{% endblock %}
